<template>
    <div class="visual-wrapper" :style="scaleStyle">
        <div class="visual-model-menubtn">
            <div class="menu-open-btn" v-for="(item ,i) in menuArr" :key="i">
                {{ item.name }}
            </div>
        </div>
        <div class="visual-model-lefttop">
            <titleComponent title="我的指标" :isFirst="true"></titleComponent>
            <myInfo></myInfo>
        </div>
        <div class="visual-model-righttop">
            <titleComponent title="我的客户" :isFirst="true"></titleComponent>
            <customerTable></customerTable>
        </div>
        <div class="visual-model-leftbottom">
            <titleComponent title="任务看板" :isFirst="true"></titleComponent>
            <div class="total-dataView-wrap-top">
                <div class="total-wrap" v-for="(item, i) in myPendingTaskArr" :key="i" :style="{backgroundColor: taskColor[i]}">
                    <div class="total-wrap-name"> {{ item.name }}</div>
                    <div class="total-wrap-num"> {{ item.num }}</div>
                </div>
            </div>
            <div class="total-dataView-wrap-middle">
                <titleComponent title="我的待办任务"></titleComponent>
                <myPending></myPending>
                <businessTable></businessTable>
            </div>
            <div class="total-dataView-wrap-bottom">
                <workOrderpie></workOrderpie>
            </div>
        </div>
        <div class="visual-model-rightbottom">
            <titleComponent title="综合看板" :isFirst="true"></titleComponent>
            <TopList/>
            <ProductList/>
        </div>
    </div>
</template>

<script>
    import titleComponent from "./components/titleComponent";
    import myInfo from "./components/myInfo";
    import myPending from "./components/myPending";
    import TopList from "./components/TopList";
    import customerTable from "./components/customerTable";
    import businessTable from "./components/businessTable";
    import {zhangyangTest} from '@/api/getData';
    import workOrderpie from "./components/workOrderpie";
    import ProductList from './components/ProductList'
    export default {
        name: "index",
        components: {
            titleComponent,
            myInfo,
            myPending,
            businessTable,
            customerTable,
            workOrderpie,
            TopList,
            ProductList
        },
        computed: {
            /* 屏幕缩放倍数 */
            scaleStyle () {
                return { transform: 'scale(' + this.screenScale.scaleX + ',' + this.screenScale.scaleY + ')' }
            }
        },
        mounted () {
            this.scale()
            window.addEventListener('resize', this.scale)
            this.$once('hook:beforeDestory', () => {
                window.removeEventListener('resize', this.scale)
            })
            // 与后端做接口测试
            zhangyangTest({params: "01"}).then(res => {
                console.log(res)
            })
        },
        data () {
            return {
                screenScale: {
                    scaleX: 1,
                    scaleY: 1
                },
                menuArr: [
                    { name: "摸信息", router: '' },
                    { name: "录商机", router: '' },
                    { name: "办业务", router: '' },
                    { name: "派工单", router: '' },
                    { name: "查画像", router: '' },
                ],
                myPendingTaskArr: [
                    { name: '我的待办任务', num: '23' },
                    { name: '我的商铺商机', num: '33' },
                    { name: '我的成员商机', num: '13' },
                    { name: '我的在途工单', num: '20' },
                ],
                colorArr: [
                    '#2269a7',
                    '#3390c9',
                    '#3e9791',
                    '#47944c',
                    '#8cb743',
                    '#e8e24e',
                    '#e69333',
                    '#cc292a',
                    '#cb245a',
                    '#c62b79',
                    '#892a7b',
                    '#313572',
                ],
                taskColor: [
                    '#0b82FF',
                    '#0aE7BE',
                    '#FF7473',
                    '#FFA944',
                ]
            }
        },
        methods: {
            /* 界面伸缩 */
            scale () {
                var width = document.body.clientWidth
                var height = document.body.clientHeight
                const scaleX = width / 1920
                const scaleY = height / 1080
                this.screenScale = {
                    scaleX,
                    scaleY
                }
                this.mapScreenScale = {
                    scaleX: width / 1920,
                    scaleY: height / 980
                }
            },
        }
    }
</script>

<style scoped lang="less">
.visual-wrapper {
    transform-origin: top left;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    overflow: auto;
    &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width : 8px;  /*高宽分别对应横竖滚动条的尺寸*/
        height: 8px;
    }
    &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        box-shadow   : inset 0 0 5px #777777;
        background   : #ececec;
    }
    &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        border-radius: 10px;
        background: transparent;
    }
    .visual-header {
        transform-origin: top left;
        position: absolute;
        top: 10px;
        left: 10px;
        width: 400px;
        height: 50px;
        z-index: 15;
        background: rgba(28, 141, 224, 0.07);
    }
    .visual-model {
        position: absolute;
        box-shadow: 0px 0px 5px 0px rgba(186, 186, 186, 0.8);
        transform-origin: top left;
    }
    .visual-model-menubtn {
        position: absolute;
        transform-origin: top left;
        top: 20px;
        left: 20px;
        .menu-open-btn {
            cursor: pointer;
            position: relative;
            box-sizing: border-box;
            margin-bottom: 15px;
            border-left: 4px solid #2D69DB;
            width: 200px;
            height: 58px;
            line-height: 55px;
            color:  #0b82FF;
            background:  #CEE6FF;
            text-align: center;
            font-weight: bolder;
            font-size: 18px;
            &:hover {
                color: white;
                background: rgb(57, 154, 254);
                box-shadow: 0px 0px 5px 0px #6d6d6d;
            }
        }
    }
    .visual-model-lefttop {
        .visual-model();
        top: 20px;
        left: 240px;
        width: 780px;
        height: 350px;
        z-index: 15;
    }
    .visual-model-righttop {
        .visual-model();
        top: 20px;
        left: 1040px;
        width: 860px;
        height: 350px;
        z-index: 15;
    }
    .visual-model-leftbottom {
        .visual-model();
        top: 390px;
        left: 20px;
        width: 1000px;
        height: 670px;
        .total-dataView-wrap-top {
            box-sizing: border-box;
            position: relative;
            width: 100%;
            height: 170px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.2);
            overflow: hidden;
            padding-left: 24px;
            .total-wrap {
                margin-top: 48px;
                position: relative;
                float: left;
                width: 224px;
                height: 100px;
                background: #1c8de0;
                margin-right: 20px;
                overflow: hidden;
                cursor: pointer;
                border-radius: 5px;
                &-name {
                    position: relative;
                    color: white;
                    text-align: center;
                    top: 20px;
                }
                &-num {
                    position: relative;
                    color: white;
                    text-align: center;
                    top: 35px;
                    font-weight: bolder;
                    font-size: 20px;
                }
                &:hover {
                    opacity: 0.8;
                }
            }
        }
        .total-dataView-wrap-middle {
            box-sizing: border-box;
            position: relative;
            width: 100%;
            height: 250px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        }
        .total-dataView-wrap-bottom {
            box-sizing: border-box;
            position: relative;
            width: 100%;
            height: 250px;
        }
    }
    .visual-model-rightbottom {
        .visual-model();
        top: 390px;
        left: 1040px;
        width: 860px;
        height: 670px;
    }
}
</style>
